import React, { Component } from 'react'
const { BMapGL, BMAP_ANCHOR_TOP_LEFT } = window
export default class MapShow extends Component {
    componentDidMount() {
        this.map = new BMapGL.Map('container'); // 创建Map实例
        this.map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 12); // 初始化地图,设置中心点坐标和地图级别
        this.map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放

        var cityControl = new BMapGL.CityListControl({
            // 控件的停靠位置（可选，默认左上角）
            anchor: BMAP_ANCHOR_TOP_LEFT,
            // 控件基于停靠位置的偏移量（可选）
            offset: new BMapGL.Size(10, 5)
        });
        // 将控件添加到地图上
        this.map.addControl(cityControl);
        var myGeo = new BMapGL.Geocoder();
        // 将地址解析结果显示在地图上，并调整地图视野
        myGeo.getPoint('北京市海淀区上地10街', (point)=>{
            if(point){
                this.map.centerAndZoom(point, 16);
                this.map.addOverlay(new BMapGL.Marker(point, {title: '北京市海淀区上地10街'}))
            }else{
                alert('您选择的地址没有解析到结果！');
            }
        }, '北京市')

    }
    render() {
        return (
            <div>
                <div style={{ height: '600px', width: '100%' }} id="container"></div>
            </div>
        )
    }
}
